<!-- Head.vue -->
<template>
  <div class="head-container">
    <!-- Logo区域 -->
    <div class="logo-area">
      <div class="logo-icon">
        <img src="../assets/images/titelogo.png" alt="">
      </div>
      <span class="logo-text">文件管理系统</span>
    </div>

    <!-- 导航标签页 -->
    <div class="nav-tabs" v-if="adminTabs">
      <el-tabs type="card" v-model="activeTab" v-if="seet == '99'" class="custom-tabs" :stretch="true" @tab-click="handleTabClick">
        <!-- <el-tab-pane label="首页" name="home"></el-tab-pane> -->
        <el-tab-pane label="工作台" name="workspace"></el-tab-pane>
        <el-tab-pane label="系统设置" name="settings"></el-tab-pane>
      </el-tabs>
    </div>

    <!-- 用户信息 -->
    <div class="user-info">
      <el-icon style="margin-top:5px;margin-right: 10px;color: #fff;font-size: 20px;">
        <Bell />
      </el-icon>
      <el-dropdown trigger="click">
        <span class="user-avatar-wrapper">
          <img :src="userAvatar" alt="用户头像" class="user-avatar">
          <span class="user-name">{{ userName }}</span>
          <el-icon class="el-icon--right" style="color: #fff;margin-left: -2px;">
            <CaretBottom />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <!-- <el-dropdown-item><el-icon>
                <Key />
              </el-icon>授权审批</el-dropdown-item> -->
            <el-dropdown-item @click="goToUserInfo"><el-icon>
                <User />
              </el-icon>个人中心</el-dropdown-item>
            <el-dropdown-item @click="logout"><el-icon>
                <SwitchButton />
              </el-icon>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { CaretBottom, User, SwitchButton, Key, Bell } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import avatarImg from '@/assets/images/ICON.png'
import { useUserStore } from '@/api/store'

const userStore = useUserStore()
userStore.refreshStore()//强制刷新数据
// 用户信息
const userInfo = computed(() => userStore.userInfo);

const router = useRouter()
const route = useRoute()

// 标签页状态
const activeTab = ref('workspace')
const userName = ref('超级管理员')
const userAvatar = ref(avatarImg)
const adminTabs = ref(false)
const seet = ref('1')

// 组件挂载时检查当前路径，自动跳转到首页
onMounted(() => {
  userName.value = userInfo.value.staffname
  seet.value = userInfo.value.rank.weigh
  //   if (route.path !== '/admin/settings') {
  //     router.replace('/admin/settings')
  //   }
})
// 监听标签变化
watch(activeTab, (newTab) => {
  const firstSegment = route.path.split('/').filter(item => item).at(0);
  if (firstSegment == "admin") {
    adminTabs.value = true
    if (newTab) {
      // 目标路径为 /admin/{newTab}，但如果当前路径已经是其子路由，则不跳转
      const targetPath = `/admin/${newTab}`;
      if (route.path !== targetPath && !route.path.startsWith(`${targetPath}/`)) {
        router.push(targetPath);
      }
    }
  } else {
    adminTabs.value = false
  }
}, { immediate: true });

// 处理标签点击
const handleTabClick = (tab) => {
  activeTab.value = tab.name
}

// 下拉导航方法
const goToUserInfo = () => {
  router.push('/userInfo/userInfo')
}
// 退出登录
const logout = () => {
  // 清除用户信息
  sessionStorage.removeItem('token')
  sessionStorage.removeItem('userInfo')
  router.push('/login')
}
</script>

<style lang="scss" scoped>
.head-container {
  height: 60px;
  width: 100%;
  background-color: #337ecc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
  color: #fff;

  // Logo区域样式
  .logo-area {
    display: flex;
    align-items: center;
    // letter-spacing: 2px;

    .logo-icon {
      img {
        width: 24px;
      }

      margin-right: 8px;
    }
  }

  // 导航标签样式
  .nav-tabs {
    width: 400px;

    // 关键: 使用:deep()穿透作用域
    :deep(.custom-tabs) {
      .el-tabs__header {
        margin: 0;
        border-bottom: none;

        .el-tabs__nav-wrap {
          padding: 0;

          .el-tabs__nav {
            border-radius: 4px;
            border: none;

            .el-tabs__item {
              flex: 0 0 auto;
              height: 30px;
              padding: 0 20px;
              margin: 0 12px;
              border-radius: 20px;
              box-sizing: border-box;
              color: rgba(255, 255, 255, 0.7);
              border: none;

              &:hover {
                color: #fff;
              }

              &.is-active {
                color: #fff;

                background-color: #2e72b8;
              }
            }
          }
        }
      }

      .el-tabs--border-card {
        border: none;
      }
    }
  }

  // 用户信息样式
  .user-info {
    cursor: pointer;

    .user-avatar-wrapper {
      display: flex;
      align-items: center;

      .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 8px;
        object-fit: cover;
      }

      .user-name {
        color: #fff;
        margin-right: 6px;
        font-size: 14px;
      }
    }
  }
}
</style>